<template>
  <view class="drink-page">
    <!-- 头部区域 -->
    <view class="header">
      <view class="header-item">
        <text class="label">昨日</text>
        <text class="value">{{ yesterday }}ml</text>
      </view>
      <view class="header-item">
        <text class="label">今日</text>
        <text class="value today">{{ today }}ml</text>
      </view>
      <view class="header-item goal" @click="showGoalInput = true">
        <text class="label">目标</text>
        <text class="value">{{ goal }}ml</text>
        <uni-icons type="compose" size="18" color="#007AFF" />
      </view>
    </view>

    <!-- 水波纹饮水量展示 -->
    <view class="water-wave-container" v-show="!showReport">
      <canvas type="2d" id="waterWave" class="water-wave"
        :style="{ width: waveSize + 'px', height: waveSize + 'px' }"></canvas>
      <view class="percent-text"> {{ percent }}% </view>
    </view>

    <!-- 用于生成分享图片的canvas，设置为不可见 -->
    <canvas canvas-id="reportCanvas"
      style="width: 750px; height: 1500px; position: fixed; left: -2000px; top: 0"></canvas>

    <!-- 记录喝水区域 -->
    <view class="drink-record-section">
      <view class="section-title">记录喝水</view>
      <view class="drink-amount-input">
        <input type="number" v-model="inputAmount" placeholder="请输入喝水量(ml)" class="amount-input" />
        <button type="primary" @click="addDrinkRecord" class="add-btn">添加记录</button>
      </view>
    </view>

    <!-- 饮水品种选择 -->
    <view class="drink-types">
      <view v-for="type in drinkTypes" :key="type.value"
        :class="['drink-type', selectedType === type.value ? 'selected' : '']" @click="selectType(type.value)">
        <image :src="type.icon" class="drink-icon" />
        <text>{{ type.label }}</text>
      </view>
    </view>

    <!-- 今日记录列表 -->
    <view class="today-records" v-if="todayRecords.length > 0">
      <view class="section-title">今日记录</view>
      <button class="generate-report-btn" @click="generateReport">生成报告</button>
      <view class="records-list">
        <view v-for="(record, index) in todayRecords" :key="index" class="record-item">
          <view class="record-type">
            <image v-if="getTypeIcon(record.type)" :src="getTypeIcon(record.type)" class="record-type-icon"
              mode="aspectFit" />
            <text class="record-type-label">{{ getTypeLabel(record.type) }}</text>
          </view>
          <view class="record-amount">{{ record.amount }}ml</view>
          <view class="record-time">{{ record.time }}</view>
        </view>
      </view>
    </view>

    <view class="drink-footer">
      <button class="add-btn" type="primary" style="margin-top: 20px;" open-type="share">分享给好友</button>
    </view>

    <!-- 目标输入弹窗 -->
    <u-popup ref="goalPopup" type="dialog" v-model:show="showGoalInput">
      <view class="goal-input-popup">
        <input type="number" v-model="inputGoal" placeholder="请输入目标饮水量(ml)" class="goal-input" />
        <button type="primary" @click="setGoal">确定</button>
      </view>
    </u-popup>

    <!-- 报告弹窗 -->
    <view class="report-modal" v-if="showReport">
      <view class="report-modal-content">
        <view class="modal-header">
          <text class="modal-title">饮水报告</text>
          <text class="modal-close" @click="closeReport">×</text>
        </view>
        <view class="modal-body">
          <view class="report-date">{{ reportContent.date }}</view>

          <view class="report-summary">
            <text class="summary-title">今日饮水总结</text>
            <view class="summary-content">
              <view>今日总饮水量: {{ reportContent.totalAmount }}ml</view>
              <view>目标饮水量: {{ reportContent.goal }}ml</view>
              <view>完成度:
                {{ Math.round((reportContent.totalAmount / reportContent.goal) * 100) }}%</view>
            </view>
          </view>

          <view class="report-records">
            <text class="summary-title">饮水详情</text>
            <view class="report-record-item" v-for="(record, index) in reportContent.records" :key="index">
              <text class="report-time">{{ record.time }}</text>
              <image v-if="getTypeIcon(record.type)" :src="getTypeIcon(record.type)" class="report-type-icon"
                mode="aspectFit" />
              <text class="report-type-label">{{ getTypeLabel(record.type) }}</text>
              <text class="report-amount">{{ record.amount }}ml</text>
            </view>
          </view>

          <view class="report-type-stats">
            <text class="summary-title">饮水类型统计</text>
            <view class="type-stats-item" v-for="(stat, type) in reportContent.typeStats" :key="type">
              <view class="type-info">
                <image v-if="getTypeIcon(type)" :src="getTypeIcon(type)" class="report-type-icon" mode="aspectFit" />
                <text class="type-label">{{ getTypeLabel(type) }}</text>
              </view>
              <view class="type-data">
                <text>{{ stat.amount }}ml</text>
                <text>({{ stat.count }}次)</text>
              </view>
            </view>
          </view>
        </view>

        <view class="modal-footer">
          <button class="share-btn" @click="shareReport">分享</button>
          <button class="close-btn" @click="closeReport">关闭</button>
        </view>
      </view>
    </view>
    <float-button />
  </view>
</template>

<script>
import { getShareAppMessageConfig, getShareTimelineConfig } from '../../utils/share.js'
import FloatButton from '../../components/FloatButton.vue'
import { 
  getLocalOpenid, 
  getDrinkRecords, 
  saveDrinkRecord, 
  getDrinkGoal, 
  setDrinkGoal, 
  getTodayDrinkAmount, 
  getYesterdayDrinkAmount,
  formatDate
} from '../../utils/storage.js'
export default {
  components: {
    FloatButton
  },
  data() {
    return {
      yesterday: 0,
      today: 0,
      goal: 2000,
      inputGoal: '',
      inputAmount: '',
      showGoalInput: false,
      waveSize: 220,
      selectedType: 'water',
      drinkTypes: [
        { label: '白开水', value: 'water', icon: '/static/drink/water.png' },
        { label: '茶', value: 'tea', icon: '/static/drink/tea.png' },
        { label: '咖啡', value: 'coffee', icon: '/static/drink/coffee.png' },
        { label: '牛奶', value: 'milk', icon: '/static/drink/milk.png' },
        { label: '奶茶', value: 'milktea', icon: '/static/drink/milktea.png' },
        { label: '饮料', value: 'drink', icon: '/static/drink/drink.png' }
      ],
      // 将动画相关状态集中管理
      waveAnimation: {
        phase: 0,
        timer: null,
        isActive: true
      },
      drinkHistory: [],
      openid: '', // 当前用户openid
      showReport: false, // 控制报告弹窗显示
      reportContent: {}, // 报告内容
      reportImagePath: '' // 报告图片临时路径
    }
  },
  computed: {
    percent() {
      return Math.min(100, Math.round((this.today / this.goal) * 100))
    },
    todayRecords() {
      return getDrinkRecords()
        .sort((a, b) => new Date(`${a.date} ${b.time}`) - new Date(`${a.date} ${a.time}`))
    }
  },
  watch: {
    today() {
      this.drawWave()
    },
    goal() {
      this.drawWave()
    }
  },
  mounted() {
    // 页面初始化时获取openid和历史记录
    this.openid = getLocalOpenid()
    this.loadDrinkHistory()
    this.loadGoal()
    setTimeout(() => {
      this.startWaveAnimation()
    }, 100)
  },
  beforeUnmount() {
    // 确保在组件销毁前停止动画并清理资源
    this.stopWaveAnimation()
    this.waterWave = null
  },
  // 分享到聊天
  onShareAppMessage() {
    return getShareAppMessageConfig({
      title: '喝水记录打卡 - 安记录丨工具舱',
      path: '/pages-sub/drink/index',
      imageUrl: '/static/share-img.png'
    })
  },
  // 分享到朋友圈
  onShareTimeline() {
    return getShareTimelineConfig({
      title: '喝水记录打卡 - 安记录丨工具舱',
      imageUrl: '/static/share-img.png'
    })
  },
  methods: {
    // 生成报告内容
    generateReportContent() {
      // 获取当前日期
      const todayStr = this.formatDate(new Date())
      const todayRecords = this.todayRecords

      // 统计数据
      const totalAmount = todayRecords.reduce((sum, record) => sum + record.amount, 0)
      const typeStats = {}
      todayRecords.forEach(record => {
        if (!typeStats[record.type]) {
          typeStats[record.type] = {
            amount: 0,
            count: 0
          }
        }
        typeStats[record.type].amount += record.amount
        typeStats[record.type].count++
      })

      // 生成报告内容
      return {
        date: todayStr,
        totalAmount: totalAmount,
        goal: this.goal,
        typeStats: typeStats,
        records: todayRecords
      }
    },

    // 生成报告
    generateReport() {
      uni.showLoading({
        title: '生成报告中...'
      })

      // 生成报告内容
      this.reportContent = this.generateReportContent()

      // 显示报告弹窗并暂停水波纹动画
      setTimeout(() => {
        uni.hideLoading()
        this.showReport = true
        // 暂停水波纹动画
        this.stopWaveAnimation()
      }, 500)
    },

    // 导出报告为图片
    exportReportAsImage() {
      uni.showLoading({
        title: '生成图片中...'
      })

      // 绘制报告到canvas
      this.drawReportCanvas()
    },

    // 绘制报告到canvas
    drawReportCanvas() {
      // 获取 canvas 上下文
      const ctx = uni.createCanvasContext('reportCanvas', this)
      const canvasWidth = 750
      const canvasHeight = 1500

      // 绘制白色背景
      ctx.fillStyle = '#FFFFFF'
      ctx.fillRect(0, 0, canvasWidth, canvasHeight)

      // 绘制标题
      ctx.fillStyle = '#333333'
      ctx.font = 'bold 36px sans-serif'
      ctx.textAlign = 'center'
      ctx.fillText('饮水记录报告', 375, 80)

      // 绘制日期
      const today = formatDate(new Date())
      ctx.font = '28px sans-serif'
      ctx.fillText(today, 375, 130)

      // 绘制分割线
      ctx.strokeStyle = '#EEEEEE'
      ctx.lineWidth = 2
      ctx.beginPath()
      ctx.moveTo(50, 160)
      ctx.lineTo(700, 160)
      ctx.stroke()

      // 绘制饮水量统计
      ctx.textAlign = 'left'
      ctx.font = 'bold 32px sans-serif'
      ctx.fillText('今日饮水量:', 50, 220)

      ctx.fillStyle = '#007AFF'
      ctx.font = 'bold 48px sans-serif'
      ctx.fillText(`${this.today}ml / ${this.goal}ml`, 50, 280)

      // 绘制完成百分比
      ctx.fillStyle = '#333333'
      ctx.font = '32px sans-serif'
      ctx.fillText(`完成率: ${this.percent}%`, 50, 340)

      // 绘制分割线
      ctx.strokeStyle = '#EEEEEE'
      ctx.beginPath()
      ctx.moveTo(50, 380)
      ctx.lineTo(700, 380)
      ctx.stroke()

      // 绘制饮水记录
      ctx.fillStyle = '#333333'
      ctx.font = 'bold 32px sans-serif'
      ctx.fillText('今日记录:', 50, 430)

      // 获取今日记录
      const todayStr = formatDate(new Date())
      const todayRecords = getDrinkRecords(todayStr)

      let yPos = 480
      ctx.font = '28px sans-serif'

      if (todayRecords.length > 0) {
        todayRecords.forEach((record, index) => {
          const timeStr = record.time || '未知时间'
          const typeStr = this.getTypeLabel(record.type) || '普通水'
          const amountStr = `${record.amount}ml`

          ctx.fillStyle = '#666666'
          ctx.fillText(`${index + 1}. ${timeStr}`, 50, yPos)
          ctx.fillText(`${typeStr}: ${amountStr}`, 350, yPos)

          yPos += 50
        })
      } else {
        ctx.fillStyle = '#999999'
        ctx.fillText('今日暂无饮水记录', 50, yPos)
      }

      // 绘制底部标识
      yPos = Math.max(yPos + 100, 950)
      ctx.fillStyle = '#999999'
      ctx.font = '24px sans-serif'
      ctx.textAlign = 'center'
      ctx.fillText('饮水记录 - 关注健康饮水 - 仅供参考', 375, yPos)

      // 绘制完成后保存图片
      ctx.draw(false, () => {
        setTimeout(() => {
          uni.canvasToTempFilePath(
            {
              canvasId: 'reportCanvas',
              width: canvasWidth,
              height: canvasHeight,
              destWidth: canvasWidth,
              destHeight: canvasHeight,
              fileType: 'png',
              quality: 1,
              success: resp => {
                uni.hideLoading()

                // 保存图片到相册
                uni.saveImageToPhotosAlbum({
                  filePath: resp.tempFilePath,
                  success: () => {
                    uni.showToast({
                      title: '报告已保存到相册',
                      icon: 'success'
                    })

                    // 保存临时路径用于分享
                    this.reportImagePath = resp.tempFilePath

                    // 显示分享操作菜单
                    uni.showActionSheet({
                      itemList: ['分享到微信'],
                      success: res => {
                        // 实际项目中可以接入微信分享SDK
                        uni.showShareImageMenu({
                          path: resp.tempFilePath,
                          success: () => {
                            uni.showToast({
                              title: '分享成功',
                              icon: 'success'
                            })
                          },
                          fail: err => {
                            console.error('分享失败', err)
                            uni.showToast({
                              title: '分享失败',
                              icon: 'none'
                            })
                          }
                        })
                      }
                    })
                  },
                  fail: err => {
                    console.error('保存图片失败', err)
                    uni.showToast({
                      title: '保存图片失败',
                      icon: 'none'
                    })
                  }
                })
              },
              fail: err => {
                uni.hideLoading()
                console.error('生成图片失败', err)
                uni.showToast({
                  title: '生成图片失败',
                  icon: 'none'
                })
              }
            },
            this
          )
        }, 300) // 延迟确保canvas绘制完成
      })
    },

    // 分享报告
    shareReport() {
      // 如果已经有报告图片路径，直接分享
      if (this.reportImagePath) {
        this.showShareMenu()
      } else {
        // 先导出为图片，然后在回调中分享
        uni.showLoading({
          title: '准备分享...'
        })
        this.exportReportAsImage()
      }
    },

    // 显示分享菜单
    showShareMenu() {
      uni.showActionSheet({
        itemList: ['分享到微信'],
        success: res => {
          // 实际项目中可以接入微信分享SDK
          uni.showShareImageMenu({
            path: this.reportImagePath,
            success: () => {
              uni.showToast({
                title: '分享成功',
                icon: 'success'
              })
            },
            fail: err => {
              console.error('分享失败', err)
              uni.showToast({
                title: '分享失败',
                icon: 'none'
              })
            }
          })
        }
      })
    },

    // 关闭报告弹窗
    closeReport() {
      this.showReport = false
      // 重新启动水波纹动画
      setTimeout(() => {
        this.startWaveAnimation()
      }, 100)
    },

    // 加载本地存储的喝水记录
    loadDrinkHistory() {
      // 获取所有喝水记录
      const drinkHistory = getDrinkRecords() || []
      this.drinkHistory = drinkHistory
      
      // 计算今日和昨日饮水量
      this.today = getTodayDrinkAmount()
      this.yesterday = getYesterdayDrinkAmount()
    },

    // 加载目标值
    loadGoal() {
      this.goal = getDrinkGoal()
    },

    // 保存喝水记录到本地存储
    saveDrinkHistory(newRecord) {
      saveDrinkRecord(newRecord)
      // 重新加载喝水记录
      this.loadDrinkHistory()
    },

    // 计算每日饮水量
    calculateDailyAmount() {
      const todayStr = this.formatDate(new Date())
      const yesterdayStr = this.formatDate(new Date(Date.now() - 86400000))

      this.today = this.drinkHistory
        .filter(item => item.date === todayStr)
        .reduce((sum, item) => sum + item.amount, 0)

      this.yesterday = this.drinkHistory
        .filter(item => item.date === yesterdayStr)
        .reduce((sum, item) => sum + item.amount, 0)
    },

    // 添加喝水记录（本地存储）
    addDrinkRecord() {
      if (!this.inputAmount || Number(this.inputAmount) <= 0) {
        uni.showToast({
          title: '请输入有效的喝水量',
          icon: 'none'
        })
        return
      }
      const amount = Number(this.inputAmount)
      const now = new Date()
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      // 创建新记录
      const newRecord = {
        date: formatDate(now),
        time: `${hours}:${minutes}`,
        type: this.selectedType,
        amount: amount
      }
      // 保存到本地存储
      this.saveDrinkHistory(newRecord)
      // 重置输入框
      this.inputAmount = ''
      // 显示成功提示
      uni.showToast({
        title: '记录成功！',
        icon: 'success'
      })
      // 回到首页并刷新今日记录
      setTimeout(() => {
        uni.$emit && uni.$emit('refreshRecord')
        uni.navigateBack()
      }, 500)
    },

    // 获取饮水类型标签
    getTypeLabel(typeValue) {
      const type = this.drinkTypes.find(t => t.value === typeValue)
      return type ? type.label : '未知'
    },
    // 获取饮水类型图片
    getTypeIcon(typeValue) {
      const type = this.drinkTypes.find(t => t.value === typeValue)
      return type ? type.icon : ''
    },

    startWaveAnimation() {
      this.stopWaveAnimation()

      // 初始化动画状态
      this.waveAnimation = {
        phase: 0,
        timer: null,
        isActive: true
      }

      // 使用箭头函数保留this上下文
      const animate = () => {
        // 检查组件是否已销毁或动画已停止
        if (!this || this._isDestroyed || this._isBeingDestroyed || !this.waveAnimation.isActive) {
          this.stopWaveAnimation()
          return
        }

        this.waveAnimation.phase += 0.15
        this.drawWave()

        // 使用setTimeout模拟requestAnimationFrame
        this.waveAnimation.timer = setTimeout(() => {
          animate()
        }, 16)
      }

      // 立即开始第一帧动画
      animate()
    },
    stopWaveAnimation() {
      try {
        if (this.waveAnimation) {
          if (this.waveAnimation.timer) {
            clearTimeout(this.waveAnimation.timer)
            this.waveAnimation.timer = null
          }
          this.waveAnimation.isActive = false
        }
      } catch (error) {
        console.error('Error stopping animation:', error)
      }
    },
    selectType(type) {
      this.selectedType = type
    },
    setGoal() {
      if (this.inputGoal && Number(this.inputGoal) > 0) {
        this.goal = Number(this.inputGoal)
        // 保存目标值到本地存储
        setDrinkGoal(this.goal)
        this.showGoalInput = false
        this.inputGoal = ''
      }
    },

    drawWave() {
      // 检查组件是否已销毁
      if (!this || this._isDestroyed || this._isBeingDestroyed) {
        return
      }

      if (!this.waterWave) {
        // 获取 Canvas 2D 上下文
        const query = uni.createSelectorQuery().in(this)
        query
          .select('#waterWave')
          .fields({ node: true, size: true })
          .exec(res => {
            if (!res[0] || !res[0].node) return

            const canvas = res[0].node
            this.waterWave = canvas.getContext('2d')
            // 设置画布大小
            canvas.width = this.waveSize
            canvas.height = this.waveSize
            this._drawWaveContent()
          })
      } else {
        this._drawWaveContent()
      }
    },

    _drawWaveContent() {
      const ctx = this.waterWave
      const size = this.waveSize
      const percent = Math.min(1, this.today / this.goal)
      const waveHeight = 10
      const waveLength = size / 2
      const centerY = size - percent * size
      const phase = this.waveAnimation.phase || 0

      ctx.clearRect(0, 0, size, size)

      // 外圆
      ctx.save()
      ctx.beginPath()
      ctx.arc(size / 2, size / 2, size / 2 - 2, 0, 2 * Math.PI)
      ctx.clip()

      // 创建渐变色
      const gradient = ctx.createLinearGradient(0, size, size, 0)
      gradient.addColorStop(0, '#4f8cff')
      gradient.addColorStop(1, '#6fd6ff')

      // 水波
      ctx.beginPath()
      for (let x = 0; x <= size; x += 1) {
        const y = waveHeight * Math.sin((2 * Math.PI * x) / waveLength + phase) + centerY
        if (x === 0) {
          ctx.moveTo(x, y)
        } else {
          ctx.lineTo(x, y)
        }
      }
      ctx.lineTo(size, size)
      ctx.lineTo(0, size)
      ctx.closePath()
      ctx.fillStyle = gradient
      ctx.fill()

      ctx.restore()
    }
  }
}
</script>

<style lang="scss" scoped>
// 清新悦目蓝色主题
$primary: #4f8cff;
$primary2: #6fd6ff;
$bg: #f6f8fa;
$card-bg: #fff;
$shadow: 0 4rpx 24rpx 0 rgba(79, 140, 255, 0.08);
$radius: 20rpx;
$border: 2rpx solid $primary;
$wave-bg: #f5faff;
$wave-shadow: 0 2px 8px #b3e5fc55;

.drink-page {
  background: $bg;
  min-height: 100vh;
  padding: 0 0 40rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 40rpx 32rpx 0 32rpx;
  width: 100%;
  max-width: 700rpx;
  box-sizing: border-box;

  .header-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .label {
      color: #888;
      font-size: 24rpx;
      margin-bottom: 4rpx;
    }

    .value {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      letter-spacing: 1rpx;
    }

    &.today .value {
      color: $primary;
      text-shadow: 0 2rpx 8rpx #e0e7ff;
    }

    &.goal {
      cursor: pointer;
      color: $primary;

      .value {
        color: $primary2;
        display: flex;
        align-items: center;
      }
    }
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 18rpx;
  color: $primary;
  letter-spacing: 1rpx;
  text-align: left;
}

.drink-record-section {
  margin: 32rpx 0 0 0;
  background-color: $card-bg;
  border-radius: $radius;
  padding: 24rpx 24rpx 20rpx 24rpx;
  box-shadow: $shadow;
  width: 92vw;
  max-width: 700rpx;
}

.drink-amount-input {
  display: flex;
  align-items: center;
  gap: 16rpx;

  .amount-input {
    flex: 1;
    height: 80rpx;
    border: 1rpx solid #e0e6ed;
    border-radius: 10rpx;
    padding: 0 16rpx;
    font-size: 28rpx;
    background: #fafdff;
  }


}

.add-btn {
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  padding: 0 36rpx;
  background: linear-gradient(90deg, $primary, $primary2);
  color: #fff;
  border: none;
  border-radius: 10rpx;
  font-weight: 600;
  box-shadow: 0 2rpx 8rpx rgba(79, 140, 255, 0.1);
  transition: background 0.2s;
}

.water-wave-container {
  margin: 56rpx auto 0 auto;
  width: 240px;
  height: 240px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  .water-wave {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: $wave-bg;
    box-shadow: $wave-shadow;
  }

  .percent-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 54rpx;
    color: $primary;
    font-weight: bold;
    width: 100%;
    pointer-events: none;
    text-shadow: 0 2rpx 8rpx #e0e7ff;
  }
}

.drink-types {
  margin: 32rpx 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 32rpx 24rpx;
  justify-content: space-between;
  width: 92vw;
  max-width: 700rpx;

  .drink-type {
    width: 30%;
    background: $card-bg;
    border-radius: $radius;
    box-shadow: $shadow;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24rpx 0;
    cursor: pointer;
    border: 2rpx solid transparent;
    transition: border 0.2s;

    &.selected {
      border: $border;
      background: $wave-bg;
    }

    .drink-icon {
      width: 56rpx;
      height: 56rpx;
      margin-bottom: 8rpx;
      background: #fafdff;
      border-radius: 8rpx;
      border: 1rpx solid #e0e6ed;
      box-shadow: 0 2rpx 8rpx rgba(79, 140, 255, 0.06);
    }

    text {
      font-size: 26rpx;
      color: #333;
      margin-top: 2rpx;
    }
  }
}

.today-records {
  margin: 32rpx 0 0 0;
  background-color: $card-bg;
  border-radius: $radius;
  padding: 24rpx 24rpx 20rpx 24rpx;
  box-shadow: $shadow;
  width: 92vw;
  max-width: 700rpx;
  position: relative;

  .generate-report-btn {
    position: absolute;
    right: 24rpx;
    top: 24rpx;
    background: linear-gradient(90deg, $primary, $primary2);
    color: #fff;
    border: none;
    border-radius: 20rpx;
    padding: 8rpx 16rpx;
    font-size: 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(79, 140, 255, 0.2);
  }

  .records-list {
    max-height: 400rpx;
    overflow-y: auto;
  }

  .record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 0;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .record-type {
      display: flex;
      align-items: center;
      gap: 8rpx;

      .record-type-icon {
        width: 36rpx;
        height: 36rpx;
        margin-right: 4rpx;
        border-radius: 6rpx;
        background: #fafdff;
        border: 1rpx solid #e0e6ed;
        box-shadow: 0 2rpx 8rpx rgba(79, 140, 255, 0.06);
      }

      .record-type-label {
        font-size: 28rpx;
        color: $primary;
        font-weight: bold;
      }
    }

    .record-amount {
      font-size: 28rpx;
      color: $primary2;
      font-weight: 600;
    }

    .record-time {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.goal-input-popup {
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .goal-input {
    width: 300rpx;
    border: 1rpx solid #e0e6ed;
    border-radius: 10rpx;
    padding: 12rpx;
    margin-bottom: 24rpx;
    font-size: 28rpx;
    background: #fafdff;
  }
}

// 报告弹窗样式
.report-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx;

  .report-modal-content {
    width: 90%;
    max-width: 650rpx;
    max-height: 80vh;
    background-color: #fff;
    border-radius: $radius;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.15);

    .modal-header {
      padding: 20rpx 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;

      .modal-title {
        font-size: 32rpx;
        font-weight: bold;
        color: $primary;
      }

      .modal-close {
        font-size: 40rpx;
        color: #999;
        padding: 0 20rpx;
      }
    }

    .modal-body {
      padding: 30rpx;
      flex: 1;
      overflow-y: auto;

      .report-date {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 20rpx;
        text-align: center;
      }

      .report-summary {
        background-color: #f9f9f9;
        padding: 20rpx;
        border-radius: 10rpx;
        margin-bottom: 30rpx;

        .summary-title {
          font-size: 28rpx;
          font-weight: bold;
          color: $primary;
          margin-bottom: 10rpx;
          display: block;
        }

        .summary-content {
          font-size: 26rpx;
          color: #666;
          line-height: 1.6;
        }
      }

      .report-records {
        margin-bottom: 30rpx;

        .report-record-item {
          display: flex;
          align-items: center;
          padding: 15rpx 0;
          border-bottom: 1px solid #f5f5f5;

          .report-time {
            font-size: 24rpx;
            color: #999;
            width: 100rpx;
          }

          .report-type-icon {
            width: 36rpx;
            height: 36rpx;
            margin-right: 10rpx;
            border-radius: 6rpx;
          }

          .report-type-label {
            font-size: 26rpx;
            color: #333;
            flex: 1;
          }

          .report-amount {
            font-size: 26rpx;
            color: $primary;
            font-weight: bold;
          }
        }
      }

      .report-type-stats {
        .type-stats-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15rpx 0;
          border-bottom: 1px solid #f5f5f5;

          .type-info {
            display: flex;
            align-items: center;

            .report-type-icon {
              width: 36rpx;
              height: 36rpx;
              margin-right: 10rpx;
              border-radius: 6rpx;
            }

            .type-label {
              font-size: 26rpx;
              color: #333;
            }
          }

          .type-data {
            font-size: 24rpx;
            color: #666;

            text {
              margin-left: 10rpx;
            }
          }
        }
      }
    }

    .modal-footer {
      padding: 20rpx 30rpx;
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #eee;

      button {
        flex: 1;
        margin: 0 10rpx;
        font-size: 28rpx;
        padding: 15rpx 0;
        border-radius: 40rpx;
      }

      .share-btn {
        background-color: $primary;
        color: #fff;
      }

      .close-btn {
        background-color: #f5f5f5;
        color: #666;
      }
    }
  }
}
</style>
